<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改账户 - UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
</head>
<body>
    <div class="container text-sm">
        <div class="row">
            <div class="col-12">
                <form id="user-form">
                    <div class="form-group row mb-4">
                        <label for="username" class="col-lg-1 col-md-3 col-sm-4 col-form-label font-weight-normal">用户名<small class="text-red">(*必填)</small></label>
                        <div class="col-lg-3 col-md-4 col-sm-5">
                            <input type="text" name="username" class="form-control" id="username" value="${user.username}" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group row mb-4">
                        <label for="password" class="col-lg-1 col-md-3 col-sm-4 col-form-label font-weight-normal">密码<small class="text-red">(*必填)</small></label>
                        <div class="col-lg-3 col-md-4 col-sm-5">
                            <input type="password" name="password" class="form-control" id="password"  autocomplete="off">
                        </div>
                    </div>
                    <div class="fixed-bottom pl-4 pt-2 pr-4 pb-2 bg-gray-light text-right border-top">
                        <button type="button" class="btn btn-sm btn-primary" id="update"><i class="fa fa-check-circle"></i> 保存</button>
                        <button type="button"  class="btn btn-sm btn-default" id="close"><i class="fa fa-times-circle-o"></i> 关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/jquery/jquery.serialize.js"></script>
    <script src="${una}/ub-admin/plugin/jquery/jquery.form.js"></script>
    <script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/layer/layer.js"></script>
    <script src="${una}/ub-admin/js/jquery.validate.min.js"></script>
    <script src="${una}/ub-admin/js/unaboot-admin.core.js" type="text/javascript"></script>
    <script type="text/javascript">
        var form = $("#user-form");
        form.validate({
            errorPlacement: function errorPlacement(error, element) {
                element.after(error);
            },
            rules:{
                username:{
                    required:true,
                    remote:{
                        type:'get',
                        url:'${una}/admin/users/validate/username',
                        data:{
                            email:function(){
                                return $("#username").val();
                            }
                        },
                        dataType:'html',
                        dataFilter:function(data,type){
                            if($("#username").val() == "${user.username}"){
                                return true;
                            }else{
                                if(data === "true"){
                                    return true;
                                }else{
                                    return false;
                                }
                            }
                        }
                    }
                },
                password:{
                    required:true,
                    rangelength:[6,16]
                },
            },
            messages:{
                username:{
                    required:'请填写用户名',
                    remote:'用户名已被注册，请更换新的用户名'
                },
                password:{
                    required:"请填写账号密码",
                    rangelength:"密码长度在6-16个字符"
                }
            }
        });
        $("#update").on("click",function(){
            var isOk = form.valid();
            if(isOk){
                var data = $("#user-form").serialize();
                var load = layer.load(2,{
                    shade:[0.4,'#f0f0f0'],
                    shadeClose:false
                });
                $.ajax({
                    type:'POST',
                    url:"${una}/admin/users/profile/pwd",
                    data:data,
                    success:function(){
                        layer.close(load);
                        var index = parent.layer.getFrameIndex(window.name);
                        layer.alert("当前操作已成功执行!",{
                            title:"<i class='fa fa-info'></i> 提示",
                            icon:1,
                            shade:[0.4,"#fff"],
                            shadeClose:false,
                            time:0,
                            btn:['OK'],
                            yes:function(newIndex){
                                parent.layer.close(index);
                                parent.layer.close(newIndex);
                                parent.location.reload();
                            }
                        });
                    },
                    error:function(){
                        layer.close(load);
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.alert("当前操作失败!请稍后再试。",{
                            title:"<i class='fa fa-info'></i> 提示",
                            icon:1,
                            shade:[0.4,"#fff"],
                            shadeClose:false,
                            time:0,
                            btn:['OK'],
                            yes:function(newIndex){
                                parent.layer.close(index);
                                parent.layer.close(newIndex);
                            }
                        });
                    }
                });
            }else{
                return false;
            }
        });
        $("#close").on("click",function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    </script>
</body>
</html>